<template>
  <div style="padding: 20px">
    <el-table
      :data="table.data"
      style="width: 80%"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column
        type="index"
        label="序号"
        width="60"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="title"
        label="资产分类名称"
        header-align="center"
      />
      <el-table-column
        label="操作"
        width="145"
        header-align="center"
        align="left"
      >
        <template #default="scope">
          <el-tooltip
            class="box-item"
            effect="dark"
            content="添加子节点"
            placement="top"
          >
            <el-button
              v-show="scope.row.parentId === -1 || scope.row.parentId === 0"
              style="margin-right: 12px"
              :icon="Plus"
              type="primary"
              @click="add(scope.row)"
            />
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="编辑"
            placement="top"
          >
            <el-button
              v-show="scope.row.id !== 0"
              :icon="Edit"
              type="warning"
              @click="edit(scope.row)"
            />
          </el-tooltip>
          <el-tooltip
            class="box-item"
            effect="dark"
            content="删除"
            placement="top"
          >
            <el-button
              v-show="scope.row.id !== 0"
              :icon="Delete"
              type="danger"
              @click="remove(scope.row)"
            />
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="table.pageNum"
      :layout="layout"
      :page-size="table.pageSize"
      :total="table.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />

    <edit ref="editRef" :type="type" @fetch-data="fetchData" />
  </div>
</template>

<script>
  import { Delete, Edit, Plus, Search } from '@element-plus/icons-vue'
  import {
    fetchAssetCategoryList,
    getDetail,
    doDelete,
  } from '@/api/assetCategoryManagement'
  import { useAclStore } from '@/store/modules/acl'
  export default defineComponent({
    name: 'AssetCategoryManagement',
    components: {
      Edit: defineAsyncComponent(() => import('./edit')),
    },
    setup() {
      const $baseConfirm = inject('$baseConfirm')
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        editRef: null,
        queryForm: {
          keywords: '',
        },
        type: '',
        layout: 'total, sizes, prev, pager, next, jumper',
        table: {
          data: [],
          loading: false,
          total: null,
          pageNum: 1,
          pageSize: 10,
        },
      })
      const aclStore = useAclStore()
      const { role, permission } = storeToRefs(aclStore)
      const fetchData = async () => {
        state.table.loading = true
        try {
          const res = await fetchAssetCategoryList(state.queryForm)
          const treeData = [
            {
              id: 0,
              parentId: -1,
              title: '全部',
              children: [],
            },
          ]
          res.data &&
            res.data.map((item) => {
              treeData[0].children.push(item)
            })
          state.table.data = treeData
        } catch (err) {
          console.error(err)
        }
        state.table.loading = false
      }

      const handleSizeChange = (val) => {
        state.table.pageSize = val
        fetchData()
      }

      const handleCurrentChange = (val) => {
        state.table.pageNum = val
        fetchData()
      }

      const add = (row) => {
        state.type = 'add'
        if (row.parentId === -1) {
          state.editRef.showEdit({
            type: 'add',
          })
        } else {
          state.editRef.showEdit({
            type: 'add',
            row: row,
          })
        }
      }

      const edit = async (row) => {
        if (row.id) {
          try {
            const { data: data } = await getDetail({ id: row.id })
            state.editRef.showEdit({
              type: 'edit',
              row: data,
            })
          } catch (err) {
            console.error(err)
          }
        } else {
          state.editRef.showEdit()
        }
      }

      const remove = async (row) => {
        if (row.id) {
          $baseConfirm('你确定要删除当前项吗', null, async () => {
            try {
              const { msg, code } = await doDelete({ ids: row.id })
              if (code === '1') {
                $baseMessage(msg, 'success', 'vab-hey-message-success')
                await fetchData()
              } else {
                $baseMessage(msg, 'error', 'vab-hey-message-error')
              }
            } catch (err) {
              console.error(err)
            }
          })
        }
      }

      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        add,
        edit,
        remove,
        fetchData,
        handleSizeChange,
        handleCurrentChange,
        Plus,
        Search,
        Delete,
        Edit,
        role,
        permission,
      }
    },
  })
</script>

<style scoped>
  .toolbar {
    margin-bottom: 4px;
  }
  :deep() {
    .el-button + .el-button {
      margin-right: 12px;
      margin-left: 0;
      &:last-child() {
        margin-right: 0;
      }
    }
    .cell button:last-child {
      margin-right: 0;
    }
    .el-button {
      width: 32px;
    }
  }
</style>
